<template>
  <div ref="scrollRef" style="position: relative;height: 100vh;overflow-y: auto;">
    <div ref=" wrap" class="wrap">
      <div ref="ScaleBox" class="ScaleBox">
        <div class="header">
          <div class="Home_title">
            {{ $t('productMonitoringDashboard') }}
          </div>
          <selectLanguage class="selectLanguage" />
        </div>
        <div class="bigScreen">
          <div style="padding: 0px 60px;">
            <div style="width: 160px;height: 60px;color: #FFFFFF;">
              <div class="flex" style="cursor: pointer;" @click="$router.push('/secondaryScreen2')">
                <div class="switchIcon" />
                <div style="margin-left: 10px; font-size: 18px;">
                  {{ $t('secondaryScreen2') }}
                </div>
              </div>
            </div>
            <div class="flex" style="width: 100%;color: #c78844; justify-content: center;">
              <div class="headerStatistics">
                <div class="headerStatistics-title">
                  <!-- | 生产数据 -->
                   {{ $t('productionData') }}
                </div>
                <div class="flex statistics justifyContentSpaceBetween">
                  <div class="statistics-item">
                    <div class="statistics-item-title">
                      <!-- | 已检测 -->
                       {{ $t('detectedCount') }}
                    </div>
                    <div class="statistics-item-value">
                      {{ totalDetected }}
                    </div>
                  </div>
                  <div class="statistics-item">
                    <div class="statistics-item-title">
                      | OK
                    </div>
                    <div class="statistics-item-value">
                      {{ totalOK }}
                    </div>
                  </div>
                  <div class="statistics-item">
                    <div class="statistics-item-title">
                      | NG
                    </div>
                    <div class="statistics-item-value">
                      {{ totalNG }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="headerStatistics">
                <div class="headerStatistics-title">
                  <!-- | 设备状态 -->
                   {{ $t('deviceState') }}
                </div>
                <div class="flex statistics justifyContentSpaceBetween">
                    <div style="width: 50%;">
                      <div class="statistics-item-value-oee">
                        <!-- | 设备运行时间(min) -->
                         {{ $t('deviceRunTime') }}
                        <span class="ccc">{{ runTime }}</span>         
                    </div>

                    </div>

                    <div style="width: 50%;">
                      <div class="statistics-item-value-oee">
                        <!-- | 设备故障时间(min) -->
                         {{ $t('deviceFaultTime') }}
                      <span class="ccc">{{ errorTime }}</span>
                    </div>
                    </div>

                    <div style="width: 50%;">
                      
                      <div class="statistics-item-value-oee" >
                        <!-- | 设备OEE -->
                         {{ $t('deviceOee') }}
                      <span class="ccc">{{ OeeData }}</span>
                    </div>
                    </div>

                   
                  <div style="width: 50%;">
                    <div class="statistics-item-value-oee">
                      <!-- | 设备待料时间(min) -->
                       {{ $t('deviceStopTime') }}
                      <span class="ccc">{{ stopTime }}</span>
                    </div>
                    </div>

                    <div style="width: 50%;">
                      <div class="statistics-item-value-oee">
                        <!-- | 设备待机时间(min) -->
                         {{ $t('deviceWaitTime') }}
                      <span class="ccc">{{ waitingTime }}</span>
                    </div>

                    </div>
                    <div style="width: 50%;">
                      <div class="statistics-item-value-oee">
                      <span class="ccc"></span>
                    </div>

                    </div>
                </div>

              </div>                     
            </div>


            <div style="display: flex; color: #FFFFFF;margin-top: 30px">
              <div style="width: 50%;">
                <div class="tableTitle">
                  A
                </div>
                <table style="width: 100%;">
                  <thead style="height: 40px; line-height: 40px;font-size: 15px;">
                  <tr align="center">
                    <!-- <td style="width: 70px;">
                      {{ $t('QRCode') }}
                    </td> -->
                    <td style="width: 200px;">
                      {{ $t('product_id') }}
                    </td>
                    <td style="width: 50px;">
                      BOW(mm)
                    </td>
                    <td style="width: 80px;">
                      Hi-pot(μA)
                    </td>
                    <td style="width: 50px;">
                      camber(mm)
                    </td>
                    <td style="width: 80px;">
                      TL(mm)
                    </td>
                    <td style="width: 75px;">
                      FtFS(mm)
                    </td>
                    <td style="width: 100px;">
                      FtLS(mm)
                    </td>
                    <td style="width: 75px;">
                      BtFS(mm)
                    </td>
                    <td style="width: 100px;">
                      BtLS(mm)
                    </td>
                    <td style="width: 80px;">
                      MH(mm)
                    </td>
                    <td style="width: 80px;">
                      Result
                    </td>
                  </tr>
                  </thead>
                  <tbody>
                  <tr
                    v-for="(item, index) in AList"
                    :key="'A' + index"
                    align="center"
                    class="tableRow"
                    style="font-size: 18px;"
                  >
                    <!-- <td style="width: 70px;">
                      <QRCode :content="item.partCode" :height="30" :width="30" />
                    </td> -->
                    <td style="width: 200px;">
                      <el-tooltip :content="item.partCode" class="tooltip" placement="top">
                        <div class="tooltip_content" style="width: 200px;">
                          {{ item.partCode || '-' }}
                        </div>
                      </el-tooltip>
                    </td>
                    <td style="width: 50px;">
                      {{ item.bow || '-' }}
                    </td>
                    <td style="width: 80px;">
                      <el-tooltip :content="item.pot" class="tooltip" placement="top">
                        <div class="tooltip_content" style="width: 95px;">
                          {{ item.pot || '-' }}
                        </div>
                      </el-tooltip>
                    </td>
                    <td style="width: 50px;">
                      {{ item.camber || '-' }}
                    </td>
                    <td style="width: 80px;">
                      {{ item.totalLength || '-' }}
                    </td>
                    <td style="width: 75px;">
                      {{ item.barb1 || '-' }}
                    </td>
                    <td style="width: 100px;">
                      {{ item.barb2 || '-' }}
                    </td>
                    <td style="width: 75px;">
                      {{ item.backBarb1 || '-' }}
                    </td>
                    <td style="width: 100px;">
                      {{ item.backBarb2 || '-' }}
                    </td>
                    <td style="width: 80px; cursor: pointer" @click="viewDetail(item)">
                      {{ item.thickness || '-' }}
                    </td>
                    <td style="width: 80px;">
                      {{ item.result || '-' }}
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
              <div style="width: 50%;overflow: auto;">
                <div style="display: flex;align-items: center;justify-content: space-between;padding-right: 20px;">
                  <div class="tableTitle">
                    B
                  </div>
                  <div>
                    <el-date-picker
                      v-model="startTime"
                      type="datetime"
                      style="margin-right: 10px"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :placeholder="$t('startTime')">
                    </el-date-picker>
                    <el-date-picker
                      v-model="endTime"
                      type="datetime"
                      style="margin-right: 10px"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :placeholder="$t('endTime')">
                    </el-date-picker>
<!--                    </div>-->
                    <el-button size="mini" type="primary" @click="exportDetailsFile">
                      详情导出
                    </el-button>
                    <el-button size="mini" type="primary" @click="exportFile">
                      导出
                    </el-button>
                  </div>
                </div>
                <table style="width: 100%;">
                  <thead style="height: 40px; line-height: 40px;font-size: 15px;">
                  <tr align="center">
                    <!-- <td style="width: 70px;">
                      {{ $t('QRCode') }}
                    </td> -->
                    <td style="width: 200px;">
                      {{ $t('product_id') }}
                    </td>
                    <td style="width: 50px;">
                      BOW(mm)
                    </td>
                    <td style="width: 95px;">
                      Hi-pot(μA)
                    </td>
                    <td style="width: 50px;">
                      camber(mm)
                    </td>
                    <td style="width: 110px;">
                      TL(mm)
                    </td>
                    <td style="width: 75px;">
                      FtFS(mm)
                    </td>
                    <td style="width: 100px;">
                     FtLS(mm)
                    </td>
                    <td style="width: 75px;">
                      BtFS(mm)
                    </td>
                    <td style="width: 100px;">
                      BtLS(mm)
                    </td>
                    <td style="width: 100px;">
                      MH(mm)
                    </td>
                    <td style="width: 100px;">
                      Result
                    </td>
                  </tr>
                  </thead>
                  <tbody>
                  <tr
                    v-for="(item, index) in BList"
                    :key="'B' + index"
                    align="center"
                    class="tableRow"
                    style="font-size: 18px;"
                  >
                    <!-- <td style="width: 70px;">
                      <QRCode :content="item.partCode" :height="30" :width="30" />
                    </td> -->
                    <td style="width: 200px;">
                      <el-tooltip :content="item.partCode" class="tooltip" placement="top">
                        <div class="tooltip_content" style="width: 200px;">
                          {{ item.partCode || '-' }}
                        </div>
                      </el-tooltip>
                    </td>
                    <td style="width: 50px;">
                      {{ item.bow || '-' }}
                    </td>
                    <td style="width: 95px;">
                      <el-tooltip :content="item.pot" class="tooltip" placement="top">
                        <div class="tooltip_content" style="width: 95px;">
                          {{ item.pot || '-' }}
                        </div>
                      </el-tooltip>
                    </td>
                    <td style="width: 50px;">
                      {{ item.camber || '-' }}
                    </td>
                    <td style="width: 110px;">
                      {{ item.totalLength || '-' }}
                    </td>
                    <td style="width: 75px;">
                      {{ item.barb1 || '-' }}
                    </td>
                    <td style="width: 100px;">
                      {{ item.barb2 || '-' }}
                    </td>
                    <td style="width: 75px;">
                      {{ item.backBarb1 || '-' }}
                    </td>
                    <td style="width: 100px;">
                      {{ item.backBarb2 || '-' }}
                    </td>
                    <td style="width: 100px; cursor: pointer" @click="viewDetail(item)">
                      {{ item.thickness || '-' }}
                    </td>
                    <td style="width: 100px;">
                      {{ item.result || '-' }}
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :before-close="handleClose"
      :visible.sync="dialogVisible"
      title="膜厚"
      width="30%">
      <el-table
        :data="thicknessList"
        style="width: 100%">
        <el-table-column
          label="正面厚度"
          prop="frontData">
        </el-table-column>
        <el-table-column
          label="反面厚度"
          prop="backData">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from '@/components/QRCode'
import { ExportQueryListNew, DetectionHistoryNew, GetThicknessList, ExportQuerydetails,getOeeData } from '@/api/common'
import selectLanguage from '@/components/selectLanguage'
import { ExportFileBOLD } from '@/utils/utils'

var roll, scrolltimer
export default {
  components: {
    QRCode,
    selectLanguage
  },
  data() {
    return {
      scale: null,
      width: 1920,
      height: 1080,
      widthValue: 1920,
      heightValue: 1080,

      queryParams: {
        language: '',
        page: 1,
        size: 20,
        status: '',
        type: 0
      },
      totalOK: 0,
      totalNG: 0,
      totalDetected: 0,
      AList: [],
      BList: [],
      interval: null,
      thicknessList: [],
      dialogVisible: false,
      startTime: '',
      endTime: '',
      runTime:0,
      errorTime:0,
      waitingTime:0,
      stopTime:0,
      OeeData:''
    }
  },
  mounted() {
    this.setScale()
    this.getInit()
    window.addEventListener('resize', this.setScale)
    this.$nextTick(() => {
      this.$refs.scrollRef.addEventListener('scroll', this.scroll)
    })
    this.interval = setInterval(() => {
      this.queryParams.page = 1
      this.$nextTick(() => {
        this.$refs.scrollRef.addEventListener('scroll', this.scroll)
      })
      this.getInit()
    }, 10000)
  },
  // 生命周期 - 创建完成
  created() {
  },
  beforeDestroy() {
    this.$refs.scrollRef.removeEventListener('scroll', this.scroll)
    clearInterval(this.interval)
  },

  destroyed() {
  },
  // 方法集合
  methods: {
    handleClose() {
      this.dialogVisible = false
    },
    viewDetail(item) {
      let lang = window.sessionStorage.getItem('lang') || 'zh'
      if (lang == 'zh') {
        lang = 'cn'
      }
      let params = {
        language: lang,
        thicknessdetectionID: item.thicknessdetectionID
      }
      GetThicknessList(params).then(res => {
        this.thicknessList = res.data
        this.dialogVisible = true
      })
    },

    exportFile() {
      let lang = window.sessionStorage.getItem('lang') || 'zh'
      if (lang == 'zh') {
        lang = 'cn'
      }
      const obj = {
        language: lang,
        type: 1,
        startTime: this.startTime,
        endTime: this.endTime
      }
      ExportQueryListNew(obj).then((res) => {
        ExportFileBOLD(res, '总表')
      })
    },
    exportDetailsFile() {
      let lang = window.sessionStorage.getItem('lang') || 'zh'
      if (lang == 'zh') {
        lang = 'cn'
      }
      const obj = {
        language: lang,
        type: 1,
        startTime: this.startTime,
        endTime: this.endTime
      }
      ExportQuerydetails(obj).then((res) => {
        ExportFileBOLD(res, '详情表')
      })
    },
    scroll(e) {
      const scrollTop = e.target.scrollTop, // 滑入屏幕滚动条滚动时，距离顶部的距离
        windowHeitht = e.target.clientHeight, // 能看到的页面的高度
        scrollHeight = e.target.scrollHeight, // 监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
        total = (scrollTop + windowHeitht) + 0.4
      if (total >= scrollHeight) {
        this.queryParams.page = this.queryParams.page + 1
        this.getInit()
        // 加载操作
        clearInterval(this.interval)
        this.interval = setInterval(() => {
          this.queryParams.page = 1
          this.$nextTick(() => {
            this.$refs.scrollRef.addEventListener('scroll', this.scroll)
          })
          this.getInit()
        }, 10000)
      }
    },
    getInit() {
      let lang = window.sessionStorage.getItem('lang') || 'zh'
      if (lang == 'zh') {
        lang = 'cn'
      }
      this.queryParams.language = lang
      DetectionHistoryNew(this.queryParams).then((res) => {
        const { code, data } = res
        if (code == 1) {
          if (this.queryParams.page == 1) {
            this.AList = []
            this.BList = []
          }
          this.totalOK = data.ok
          this.totalNG = data.ng
          this.totalDetected = data.detected
          if (data.listA && data.listA.length > 0 && data.listB && data.listB.length > 0) {
            this.AList = [...this.AList, ...data.listA]
            this.BList = [...this.BList, ...data.listB]
          } else {
            this.$refs.scrollRef.removeEventListener('scroll', this.scroll)
          }
        }
      })
      getOeeData().then((res)=>{
        const{code,data} =res
        if(code==1){
          this.runTime = data.totalRunTime
          this.errorTime = data.faultTime
          this.OeeData = data.oee
          this.waitingTime = data.waitingTime
          this.stopTime = data.stopTime
        }
      })
    },
    getScale() {
      const { width, height } = this,
        ww = window.innerWidth / width,
        wh = window.innerHeight / height
      return ww < wh ? wh : ww
      // return ww
      // return ww < wh ? ww : wh;
    },
    getHeightScale() {
      const { width, height } = this,
        wh = window.innerHeight / height
      return wh
    },
    getWidthScale() {
      const { width, height } = this,
        ww = window.innerWidth / width
      return ww
    },
    setScale() {
      this.scale = this.getScale()
      const scale1 = this.getWidthScale(),
        scale2 = this.getHeightScale()
      if (this.$refs.ScaleBox) {
        this.$refs.ScaleBox.style.setProperty('--scale', scale1)
        this.$refs.ScaleBox.style.setProperty('--scale2', scale2)
      }
      if (this.$refs.wrap) {
        this.$refs.wrap.style.setProperty(
          '--heightValue',
          this.scale * this.heightValue + 'px'
          // this.scale * this.heightValue
        )
        this.$refs.wrap.style.setProperty(
          '--widthValue',
          this.scale * this.widthValue + 'px'
        )
      }
      // this.$refs.ScaleBox.style.setProperty("--scale", this.scale); //设置指定键值对系统属性
    },
    today() {
      const date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate()
      if (month < 10) {
        return `${year}${'0' + month}${day}`
      } else {
        return `${year}${month}${day}`
      }
    },

    // 使某符合条件的一行颜色改变
    tableAddClass({ row, rowIndex }) {
      if (row.flag == true) {
        return 'tr-red'
      }
      return ''
    }
  }
}
</script>

<style scoped>
.header {
  position: relative;
  width: 1920px;
  height: 100px;
  background-image: url('../../assets/imgs/u80.png');
  background-size: 100% 100%;
  text-align: center;
  font-size: 40px;
  color: #fff;
  line-height: 100px;
  font-weight: 600;
  letter-spacing: 0.15em;
}

/* body::-webkit-scrollbar {
  width: 0 !important;
  display: none;
} */

/*隐藏滚轮*/
/* ::-webkit-scrollbar {
  display: none;
  overflow-y: hidden;
} */

.wrap {
  width: var(--widthValue);
  height: var(--heightValue);
  min-height: 100vh;
  background-color: #050d3a;
  background-size: 100% 100%;
  overflow: hidden;
  scrollbar-width: none;
}

#ScaleBox {
  --scale: 1;
}
.ccc{
  display: block;
  float:right;
  margin-right:150px;

}
.ScaleBox {
  width: 100%;
  height: 100%;
  transform: scale(var(--scale), var(--scale2));
  transform-origin: 0 0;
  background-repeat: no-repeat;
  background-size: 100%;
}

.flex {
  display: flex;
  align-items: center;
}

.justifyContentSpaceBetween {
  justify-content: space-evenly;
  align-items:flex-start;
  flex-wrap: wrap;
  
}

.bigScreen {
  width: 1920px;
  box-sizing: border-box;
  padding: 20px;
}

.switchIcon {
  width: 50px;
  height: 50px;
  background-image: url('../../assets/imgs/background.png');
  background-position: -130px 425px;
}

.headerStatistics {
  width: 100%;
}

.headerStatistics-title {
  font-weight: 700;
  font-style: normal;
  font-size: 28px;
  margin-bottom: 20px;
}

.statistics {
  width: calc(100% - 60px);
  border: 2px solid #40607e;
  border-radius: 30px;
  padding: 20px;
}

.statistics-item {
  border: 2px solid #40607e;
  border-radius: 30px;
  width: calc((100% / 3) - 30px);
}

.statistics-device {
  margin-bottom: 20px;
}

.statistics-device-title {
  width: 200px;
}

.statistics-item-title {
  font-weight: 700;
  font-style: normal;
  font-size: 28px;
  padding: 26px 26px 0px 26px;
  text-align: left;
}

.statistics-item-value {
  font-weight: 700;
  font-style: normal;
  font-size: 22px;
  /* color: #D7D7D7; */
  text-align: center;
  margin-top: 20px;
}

.statistics-item-title-oee {
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  padding: 26px 26px 0px 26px;
  text-align: left;
}

.statistics-item-value-oee {
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  /* color: #D7D7D7; */
  /* text-align: center; */
  margin-top: 20px;
}

.tableTitle {
  font-weight: 700;
  font-style: italic;
  font-size: 36px;
  color: #FFFFFF;
  padding-left: 40px;
}

td {
  height: 60px;
  line-height: 60px;
  vertical-align: middle;
  text-align: center;
}

.tooltip_content {
  overflow: hidden;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

::v-deep .el-date-editor .el-input__inner {
  background-color: #050d3a !important;
}
</style>
